<template>
  <v-container fluid>
    <v-toolbar
      color="light"
      flat
      dense
    >
      <v-toolbar-title>Admin</v-toolbar-title>
      <v-toolbar-items class="hidden-sm-and-down" v-model="menu">
        <v-btn flat to="/admin/notes">Notes</v-btn>
        <v-btn flat to="/admin/articals">Articals</v-btn>
        <v-btn flat to="/admin/tags">Tags</v-btn>
        <v-btn flat to="/admin/categories">Categories</v-btn>
        <v-btn flat to="/admin/authors">Authors</v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <router-view
      :tagItems="tagItems"
      :authorItems="authorItems"
      :categoryItems="categoryItems" />
  </v-container>
</template>

<script>
export default {
  data () {
    return {
      menu: true,
      tagItems: [],
      authorItems: [],
      categoryItems: []
    }
  },
  beforeMount () {
    this.$store.dispatch('fetchTagItems')
    this.$store.dispatch('fetchAuthorItems')
    this.$bus.$on('insertedTag', (payload) => { this.tagItems.push(payload) })
    this.$bus.$on('insertedAuthor', (payload) => { this.authorItems.push(payload) })
    this.$bus.$on('insertedCategory', (payload) => { this.categoryItems.push(payload) })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  /*padding: 0;*/
}
</style>
